<template>
  <div
      style="margin-bottom: 5px;height: 30px;width: 60px;border: 1px solid #ccc;cursor: pointer;display: flex;box-shadow: 0 1px 1px 1px #7e7e7e;justify-content: center;align-items: center;border-radius: 10px;background: rgb(252,246,0) "
      @click="shoufang">{{ isContainerVisible ? '收起' : '展开' }}
  </div>
  <el-container
      v-if="isContainerVisible"
      class="container1-class"
      :style="{ backgroundImage: backgroundImage ? `url(${backgroundImage})` : '', backgroundSize: 'cover', backgroundPosition: 'center' }"
      :class="{ 'animate-bg': isAnimating }">
    <p style="position: absolute;bottom: 3px;font-weight: 700;left: 10px;font-size: 20px;font-family: Sans-Serif">{{backgroundImagetitle}}</p>
    <div class="carousel-wrapper">
      <el-carousel :interval="4000" type="card"  height="140px" indicator-position="none" :autoplay="true" :loop="true" card-scale="1">
        <template #prev-arrow><i class="el-icon-arrow-left"></i></template>
        <template #next-arrow><i class="el-icon-arrow-right"></i></template>
        <el-carousel-item v-for="(course, index) in courses"  :key="index" style=";margin-left: 54px;width: 23%; height:100%; display: inline-block;">
          <img v-if="course.image" :src="`http://localhost:8080/img?imgUrl=${course.image}`" style="width: 100%; height: 100%; object-fit: cover;border-radius: 6px;" alt="课程图片" @click="handleImageClick(course.image)">
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-container>
  <div style="display: flex;justify-content: space-around;margin: 20px;height: 100px;gap:10px" ref="contentArea">
    <div class="btn"
         :style="{
       background: '#409EFF',
       transform: pageid === 0 ? 'scale(0.97) translateY(2px)' : 'none'
     }"
         @click="changepageid(0)">全部课程</div>

    <div class="btn"
         :style="{
       background: '#228522',
       transform: pageid === 1 ? 'scale(0.97) translateY(2px)' : 'none'
     }"
         @click="changepageid(1)">课程订单</div>

    <div class="btn"
         :style="{
       background: 'red',
       transform: pageid === 2 ? 'scale(0.97) translateY(2px)' : 'none'
     }"
         @click="changepageid(2)">课程评价</div>

    <div class="btn"
         :style="{
       background: 'yellow',
       transform: pageid === 3 ? 'scale(0.97) translateY(2px)' : 'none'
     }"
         @click="changepageid(3)">课程分类</div>

    <div class="btn"
         :style="{
       background: 'gray',
       transform: pageid === 4 ? 'scale(0.97) translateY(2px)' : 'none'
     }"
         @click="changepageid(4)">课程交流</div>
  </div>
  <el-container v-if="pageid===0" class="course-container">
    <!-- 搜索区域 -->
    <el-header class="search-header">
      <el-row :gutter="20" justify="space-between" align="middle">
        <el-col :span="6">
          <el-input v-model="searchForm.courseName" placeholder="课程名称" clearable>
            <template #prefix><i class="el-icon-search"></i></template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="searchForm.consultantId" placeholder="咨询师编号" clearable>
            <template #prefix><i class="el-icon-menu"></i></template>
          </el-input>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
          <el-button plain icon="Plus" @click="handleAdd">新增课程</el-button>
        </el-col>
      </el-row>
    </el-header>

    <!-- 课程表格 -->
    <el-main class="main-content">
      <el-table
          :data="courses"
          stripe
          border
          style="width: 100%"
          v-loading="loading"
          element-loading-text="加载中..."
          :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column prop="courseName" label="课程名称" width="180" />
        <el-table-column prop="image" label="封面图片" width="150">
          <template #default="scope">
            <img :src="`http://localhost:8080/img?imgUrl=${scope.row.image}`"
                 alt="Image" style="width: 100px; height: 60px; object-fit: cover;"/>
          </template>
        </el-table-column>
        <el-table-column prop="videoFileName" label="视频文件" width="200">
          <template #default="{ row }">
            <span v-if="row.videoFileName" class="file-link">{{ row.videoFileName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="currentPrice" label="现价" width="100">
          <template #default="{ row }">￥{{ row.currentPrice.toFixed(2) }}</template>
        </el-table-column>
        <el-table-column prop="studyCount" label="学习次数" width="100" />
        <el-table-column prop="collectionCount" label="收藏量" width="100" />
        <el-table-column prop="validityPeriod" label="有效期(天)" width="100" />
        <el-table-column prop="intro" label="简介" width="120" />
        <el-table-column prop="targetAudience" label="适用人群" width="150" />
        <el-table-column prop="totalDuration" label="总时长" width="150" />
        <el-table-column prop="learningOutcomes" label="学习收获" width="100" />
        <el-table-column prop="subscriptionNote" label="订阅须知" width="100" />
        <el-table-column prop="consultantId" label="咨询师编号" width="100" />
        <el-table-column prop="consultantName" label="咨询师姓名" width="100" />
      
        <el-table-column prop="collectionCount" label="收藏量" width="100" />
        <el-table-column prop="reviewCount" label="评价量" width="100" />
        <el-table-column prop="materialCount" label="课件数量" width="100" />
        <el-table-column prop="shangXianTime" label="上架时间" width="100" />
        <el-table-column prop="categoryId" label="分类编号" width="100" />
        <el-table-column label="操作" fixed="right" width="320">
          <template #default="scope">
            <el-button type="info" size="small" @click="handleDetail(scope.row)">详情</el-button>
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="success" size="small" @click="handleViewVideo(scope.row)">查看视频</el-button>
            <el-button
                type="danger"
                size="small"
                @click="handleDeleteConfirm(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页组件 -->
      <div class="pagination-wrapper">
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5, 10, 15, 20]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-main>

    <!-- 弹窗组件 -->
    <el-dialog
        v-model="dialogVisible"
        :title="currentDialogType === 'add' ? '添加课程' : currentDialogType === 'edit' ? '编辑课程' : '课程详情'"
        :width="currentDialogType === 'detail' ? '80%' : '600px'"
        class="course-dialog"
    >
      <el-form :model="form" :rules="rules" ref="formRef" label-width="130px" class="dialog-form">
        <!-- 基础信息 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程名称" prop="courseName">
              <el-input v-model="form.courseName" :disabled="currentDialogType !== 'add'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="分类编号" prop="categoryId">
              <el-input v-model="form.categoryId" :disabled="currentDialogType !== 'add'" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="总时长（分钟）" prop="totalDuration">
              <el-input v-model="form.totalDuration" :disabled="currentDialogType !== 'add'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效期（天）" prop="validityPeriod">
              <el-input-number v-model="form.validityPeriod" :min="1" :disabled="currentDialogType !== 'add'" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 统计信息（只读） -->
        <el-row :gutter="20" class="stats-row">
          <el-col :span="8">
            <el-form-item label="学习次数" prop="studyCount">
              <el-input
                  v-model.number="form.studyCount"
                  :disabled="currentDialogType !== 'add'"
                  class="stats-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收藏量" prop="collectionCount">
              <el-input
                  v-model.number="form.collectionCount"
                  :disabled="currentDialogType !== 'add'"
                  class="stats-input"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="评价量" prop="reviewCount">
              <el-input
                  v-model.number="form.reviewCount"
                  :disabled="currentDialogType !== 'add'"
                  class="stats-input"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 媒体信息 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="封面图片" prop="image">
              <el-upload
                  ref="uploadRef"
                  class="avatar-uploader"
                  action="#"
                  :auto-upload="false"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                  :on-change="(file) => customUpload({ file: file.raw })"
              >
                <template #trigger>
                  <div class="upload-area">
                    <img v-if="form.image" :src="`http://localhost:8080/img?imgUrl=${form.image}`" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  </div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="视频文件" prop="videoFileName">
              <el-upload
                  v-if="currentDialogType !== 'detail'"
                  class="video-uploader"
                  :action="uploadUrl"
                  :headers="uploadHeaders"
                  :on-success="handleVideoUploadSuccess"
                  :before-upload="beforeVideoUpload"
                  :show-file-list="false"
              >
                <el-button type="primary" icon="Upload">上传视频</el-button>
              </el-upload>
              <div v-else class="video-info">
                <span>{{ form.videoFileName }}</span>
                <el-button type="text" icon="Play" @click="handlePlayVideo"></el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 价格信息 -->
        <el-row :gutter="20" class="price-row">
          <el-col :span="12">
            <el-form-item label="原价" prop="originalPrice">
              <el-input-number v-model="form.originalPrice" :precision="2" :min="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="现价" prop="currentPrice">
              <el-input-number v-model="form.currentPrice" :precision="2" :min="0" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 详细信息 -->
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="咨询师编号" prop="consultantId">
              <el-input v-model="form.consultantId" :disabled="currentDialogType !== 'add'" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="咨询师编号" prop="consultantName">
              <el-input v-model="form.consultantName" :disabled="currentDialogType !== 'add'" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="课件数量" prop="materialCount">
              <el-input-number v-model="form.materialCount" :min="0" :disabled="currentDialogType !== 'add'" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 时间信息 -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="上架时间" prop="shangXianTime">
              <el-date-picker
                  v-model="form.shangXianTime"
                  type="datetime"
                  placeholder="选择上架时间"
                  :disabled="currentDialogType !== 'add'"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 描述信息 -->
        <el-form-item label="简介" prop="intro">
          <el-input type="textarea" v-model="form.intro" :rows="3" />
        </el-form-item>
        <el-form-item label="适用人群" prop="targetAudience">
          <el-input type="textarea" v-model="form.targetAudience" :rows="2" />
        </el-form-item>
        <el-form-item label="学习收获" prop="learningOutcomes">
          <el-input type="textarea" v-model="form.learningOutcomes" :rows="3" />
        </el-form-item>
        <el-form-item label="订阅须知" prop="subscriptionNote">
          <el-input type="textarea" v-model="form.subscriptionNote" :rows="3" />
        </el-form-item>
      </el-form>

      <template #footer>
                <span v-if="currentDialogType !== 'detail'">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button
                        type="primary"
                        @click="handleConfirmAction"
                        :loading="submitLoading"
                    >
                        确定
                    </el-button>
                </span>
        <span v-else>
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </span>
      </template>
    </el-dialog>
  </el-container>
  <OrderManager v-if="pageid===1"></OrderManager>
  <KechengPingjia v-if="pageid===2"></KechengPingjia>
  <KechengFenlei v-if="pageid===3"></KechengFenlei>
  <KechengJiaoliu v-if="pageid===4"></KechengJiaoliu>
</template>

<script setup>
import { ref, reactive, onMounted, watchEffect, defineProps,nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import courseHttp from '@/http/http.js';
import { Plus } from "@element-plus/icons-vue";
import OrderManager from "@/views/KC/components/OrderManager.vue";
import KechengPingjia from "@/views/KC/components/KechengPingjia.vue";
import KechengFenlei from "@/views/KC/components/KechengFenlei.vue";
import KechengJiaoliu from "@/views/KC/components/KechengJiaoliu.vue";
// 新增响应式变量
const contentArea = ref(null)
const backgroundImage = ref('');
const isAnimating = ref(false);
const backgroundImagetitle=ref('');
const pageid = ref(0);
// 响应式数据
const props = defineProps(["data"]);
const imageUrl = ref(''); // 用于预览上传的图片
const uploadRef = ref();
const courses = ref([]);
const loading = ref(false);
const dialogVisible = ref(false);
const currentDialogType = ref('add');
const formRef = ref(null);
const submitLoading = ref(false);
const uploadUrl = '/api/upload'; // 文件上传接口
const uploadHeaders = { Authorization: 'Bearer ' + localStorage.getItem('token') };
const isContainerVisible = ref(true);
// 分页配置
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 搜索表单
const searchForm = reactive({
  courseName: '',
  consultantId: ''
});

// 表单数据
const form = reactive({
  id: null,
  courseName: '',
  videoFileName: '',
  image: '',
  originalPrice: 0,
  currentPrice: 0,
  intro: '',
  targetAudience: '',
  learningOutcomes: '',
  subscriptionNote: '',
  consultantId: '',
  categoryId: '',
  validityPeriod: 0,
  studyCount: 0,
  categoryName: '',
  consultantName: ''
});

// 表单验证规则
const rules = reactive({
  courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
  currentPrice: [{ required: true, message: '请输入现价', trigger: 'blur' }],
  categoryId: [{ required: true, message: '请输入分类编号', trigger: 'blur' }]
});

// API配置
const api = {
  fetchCourses: (params) => courseHttp.get('/zh/course/page', { params }),
  searchCourses: (params) => courseHttp.get('/zh/course/search', { params }),
  addCourse: (form) => courseHttp.post('/zh/course', form, {
    headers: {
      // 修改请求头为 JSON 格式
      "Content-Type": "application/json"
    }
  }),
  updateCourse: (form) => courseHttp.put('/zh/course', form, {
    headers: {
      // 修改请求头为 JSON 格式
      "Content-Type": "application/json"
    }
  }),
  deleteCourse: (id) => courseHttp.delete(`/zh/course/${id}`)
};

// 获取课程列表
const fetchCourses = async () => {
  console.log("1111");
  loading.value = true;
  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      ...searchForm
    };
    const res = await api.fetchCourses(params);
    if (res.code === 200) {
      courses.value = res.data.list;
      total.value = res.data.total;
      if (courses.value.length > 0 && courses.value[0].image) {
        backgroundImage.value = `http://localhost:8080/img?imgUrl=${courses.value[0].image}`;
      }
    }
  } catch (error) {
    handleError(error);
    // token
    console.log('Current token:', localStorage.getItem('token'))
  } finally {
    loading.value = false;
  }
};

// 初始化
onMounted(fetchCourses);

// 文件上传
const beforeUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    ElMessage.error('只能上传图片文件!');
    return false;
  }
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过2MB!');
    return false;
  }
  return true;
};

// 自定义上传方法
const customUpload = async (options) => {
  const { file } = options;
  const formData = new FormData();
  formData.append('file', file);
  formData.append('subPath', 'images/FC');

  try {
    const response = await fetch('/api/img', {
      method: 'POST',
      body: formData
    });

    const result = await response.json();

    if (result.code === 200) {
      // 上传成功，更新图片URL
      form.image = result.data;
      imageUrl.value = `http://localhost:8080/img?imgUrl=${result.data}`; // 使用GET接口获取图片
      ElMessage.success('图片上传成功');
    } else {
      ElMessage.error(result.message || '图片上传失败');
    }
  } catch (error) {
    ElMessage.error('上传过程中出现错误');
    console.error('Upload error:', error);
  }
};

watchEffect(() => {
  if (props.data) {
    form.value = {...props.data};
    imageUrl.value = props.data.image
        ? `http://localhost:8080/img?imgUrl=${props.data.image}`
        : '';
  }
});

const handleVideoUploadSuccess = (response) => {
  form.videoFileName = response.data.fileName;
};

const beforeVideoUpload = (file) => {
  const isVideo = file.type.startsWith('video/');
  if (!isVideo) {
    ElMessage.error('只能上传视频文件!');
  }
  return isVideo;
};

const handleSearch = async () => {
  try {
    loading.value = true;
    currentPage.value = 1;
    pageSize.value = 10;

    const params = {
      courseName: searchForm.courseName?.trim() ?? '',
      consultantId: searchForm.consultantId?.toString?.() ?? '',
      pageNum: 1,
      pageSize: pageSize.value
    };
    if (!params.courseName && !params.consultantId) {
      ElMessage.warning('请至少输入一个搜索条件');
      return;
    }
    const res = await api.searchCourses(params);

    if (!res.data || res.code !== 200) {
      throw new Error(res.message || '搜索失败');
    }

    courses.value = res.data.list || [];
    total.value = Number(res.data.total) || 0;
    if (courses.value.length > 0 && courses.value[0].image) {
      backgroundImage.value = `http://localhost:8080/img?imgUrl=${courses.value[0].image}`;
    }
  } catch (error) {
    handleError(error);
    courses.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
};

// 表单操作
const handleAdd = () => {
  currentDialogType.value = 'add'

  // 重置表单数据
  form.value = {
    id: null,
    courseName: '',
    videoFileName: '',
    image: '',
    originalPrice: 0,
    currentPrice: 0,
    studyCount: 0,
    collectionCount: 0,
    reviewCount: 0,
    consultantId: '',
    consultantName: '',
    materialCount: 0,
    validityPeriod: 365,
    shangXianTime: new Date().toISOString().slice(0, 19),
    categoryId: '',
    intro: '',
    targetAudience: '',
    learningOutcomes: '',
    subscriptionNote: '',
    categoryName: ''
  }

  // 重置表单验证
  if (formRef.value) {
    formRef.value.resetFields()
  }

  dialogVisible.value = true
}

const handleEdit = (row) => {
  console.log(row)
  currentDialogType.value = 'edit';
  Object.assign(form, row);
  dialogVisible.value = true;
};

const handleDetail = (row) => {
  currentDialogType.value = 'detail';
  Object.assign(form, row);
  dialogVisible.value = true;
};

// 提交表单
const handleConfirmAction = async () => {
  try {
    await formRef.value.validate();
    submitLoading.value = true;

    if (currentDialogType.value === 'add') {
      await api.addCourse(form);
      ElMessage.success('添加成功');
    } else {
      await api.updateCourse(form);
      ElMessage.success('更新成功');
    }

    dialogVisible.value = false;
    await fetchCourses();
  } catch (error) {
    if (error !== 'cancel') handleError(error);
  } finally {
    submitLoading.value = false;
  }
};

// 删除确认
const handleDeleteConfirm = async (row) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
        `确定删除课程【${row.courseName}】？`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )

    // 只有当用户点击确定时才执行删除
    if (confirmResult === 'confirm') {
      await api.deleteCourse(row.id)
      ElMessage.success('删除成功')
      await fetchCourses()
    }
  } catch (error) {
    // 捕获取消操作和其他错误
    if (error !== 'cancel') {
      handleError(error)
    }
  }
}
// 分页控制
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchCourses();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchCourses();
};

// 错误处理
const handleError = (error) => {
  console.error('API Error:', error);
  ElMessage.error(error.message || '操作失败');
};

// 点击轮播图图片处理方法
const handleImageClick = (imgUrl) => {
  // 找到当前点击的图片对应的课程
  const currentCourse = courses.value.find(course => course.image === imgUrl);
  if (currentCourse) {
    backgroundImagetitle.value = currentCourse.courseName;
    backgroundImage.value = `http://localhost:8080/img?imgUrl=${imgUrl}`;
    isAnimating.value = true;
    setTimeout(() => {
      isAnimating.value = false;
    }, 500); // 动画时长 500ms
  }
};

//展开收缩
const shoufang = () => {
  isContainerVisible.value = !isContainerVisible.value;
};

const changepageid = (id) => {
  pageid.value = id

  // 使用 nextTick 确保 DOM 更新完成
  nextTick(() => {
    if (contentArea.value) {
      // 平滑滚动到目标区域
      contentArea.value.scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      })
    }
  })
}
</script>

<style scoped>
.course-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.search-header {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.main-content {
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.file-link {
  color: #409EFF;
  cursor: pointer;
}
.stats-row {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #eee;
}

.stats-input {
  width: 100%;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.stats-input .el-input__inner {
  background-color: transparent !important;
  border: none !important;
  text-align: right;
}

.stats-input .el-form-item__label {
  text-align: left !important;
}

.course-dialog {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.dialog-form {
  padding: 24px;
}

.price-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #eee;
}

.el-row {
  margin-bottom: 20px;
}

.el-col:last-child {
  margin-bottom: 0;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
}

.avatar-uploader {
  width: 100%;
  height: 120px;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-uploader-icon {
  font-size: 48px;
  color: #8c939d;
}

.video-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #409EFF;
}

.el-form-item__label {
  font-weight: 500;
  color: #333;
}

.el-input-number {
  width: 100%;
}

.el-date-picker {
  width: 100%;
}

/* 详情模式样式覆盖 */
.dialog-form .el-input.is-disabled input,
.dialog-form .el-textarea.is-disabled textarea {
  background-color: #f5f7fa;
  color: #606266;
  border-color: #e4e7ed;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .el-col {
    width: 100% !important;
  }
}

.avatar-uploader-icon {
  font-size: 30px;
  color: #8c939d;
}

.video-uploader {
  margin-top: 10px;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-dialog__header {
  background-color: #f5f7fa;
  padding: 15px;
  border-bottom: 1px solid #ebeef5;
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.container1-class {
  position: relative;
  background: white;
  height: 410px;
  transition: background-image 0.5s ease-in-out; /* 背景图片切换动画 */
  background-size:100% ;
  box-shadow: 1px 5px 5px 5px #ccc;
  border-radius: 8px;
}

.animate-bg {
  animation: scaleBg 0.5s ease-in-out; /* 放大动画 */
}

.el-carousel__item {
  white-space: nowrap;
  overflow: hidden;
}

.el-carousel__item img {
  vertical-align: top;
}

.carousel-wrapper {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 400px; /* 可以根据需要调整宽度 */
}

@keyframes scaleBg {
  from {
    background-size: 0;
  }
  to {
    background-size: cover;
  }
}
.btn{
  border-radius: 10px;
  border: 1px solid #ccc;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 2px 2px #8c8c8c;
}
.btn:hover{

  position: relative;
  top: -1px;
  cursor: pointer;
}

</style>